<template>
<div :class="$style.container">
  <heador :obj="film"/>
  <Videro :film="film"/>
  <Comment :comments="comments" :film="film" @commentSuccess="handleCommentSuccess"/>
  <div>
    <loading :show="showLoading" text="加载中..."></loading>
    <alert v-model="showAlert" title="提示" :content="tip"></alert>
  </div>
</div>
</template>

<script>
import http from '../../APIService/http'
import { Loading, Alert } from 'vux'
import Videro from './components/video'
import Comment from './components/comment'
import Heador from './components/heador'
export default {
  data () {
    return {
      showLoading: false,
      showAlert: false,
      tip: '',
      id: '',
      film: {},
      comments: []
    }
  },
  components: {
    Loading,
    Alert,
    Videro,
    Comment,
    Heador
  },
  mounted () {
    this.id = this.$route.query.id
    this.init()
  },
  methods: {
    async init () {
      try {
        let params = {
          id: this.id
        }
        this.showLoading = true
        let [filmRes, commentRes] = await Promise.all([
          http.get(`/dianshang/getFilmDetail`, params),
          http.get(`/comment/lists`, params)

        ])
        this.showLoading = false
        this.film = filmRes.data
        this.comments = commentRes.data
      } catch (err) {
        this.showLoading = false
        console.log('get film detail:', err)
      }
    },
    handleCommentSuccess () {
      this.init()
    }
  }
}
</script>

<style lang='less' module>
.container {
  background: #2d2d30;
  min-height: 100vh;
  overflow-x: hidden;
}

</style>